<!-- 车型管理 -->
<template>
  <div class="vehicleMmanage-container">
    <div class="vehicleMmanage-container-header">
      <el-form :inline="true" label-width="80px">
        <el-row>
          <el-form-item label="车型编号:" style="margin-right: 60px;" prop="id">
            <el-input v-model.trim="carTypePagingData.id" placeholder="请输入车型编号" />
          </el-form-item>
          <el-form-item label="应载重量:" style="margin-right: 60px;">
            <el-select v-model="carTypePagingData.allowableLoad" placeholder="请选择应载重量">
              <!-- label文字,value值 -->
              <el-option v-for="v in bearingWeight " :key="v.id" :label="v.name" :value="v.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="应载体积:">
            <el-select v-model="carTypePagingData.allowableVolume" placeholder="请选择应载体积">
              <el-option v-for="v in vehicleVolume " :key="v.id" :label="v.name" :value="v.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="车辆类型:" style="margin-right: 60px;">
            <el-input v-model.trim="carTypePagingData.name" placeholder="请输入车辆类型" />
          </el-form-item>
          <el-form-item>
            <el-button @click="search">搜索</el-button>
            <el-button class="reset" @click="reset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="vehicleMmanage-container-footer">
      <el-card shadow="never">
        <el-button class="addVehicle" @click="visible = true">新增车型</el-button>
        <el-table stripe style="width: 100%" fit :data="pagingItems">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column label="车型编号" min-width="180" align="left" prop="id" />
          <el-table-column label="车辆类型" min-width="130" align="left" prop="name" />
          <el-table-column label="车型数量" min-width="100" prop="num" />
          <el-table-column label="应载重量(吨)" min-width="150" prop="allowableLoad" />
          <el-table-column label="应载体积(立方米)" min-width="150" prop="allowableVolume" />
          <el-table-column label="长(米)" min-width="100" prop="measureLong" />
          <el-table-column label="宽(米)" min-width="100" prop="measureWidth" />
          <el-table-column label="高(米)" min-width="100" prop="measureHigh" />
          <el-table-column
            fixed="right"
            label="操作"
            width="130"
            align="center"
          >
            <template #default="{row}">
              <el-button type="text" @click="edit(row.id)">编辑</el-button>
              <el-divider direction="vertical" />
              <el-popconfirm title="确认删除该行数据吗？" @onConfirm="del(row.id)">
                <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <!-- 这里要转一个数据类型 total -->
          <el-pagination
            :page-sizes="[10,20,30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
            :current-page="carTypePagingData.page"
            :page-size="carTypePagingData.pageSize"
            @current-change="pageUpdate"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 新增和编辑弹框组件 -->
    <vehicle-dialog ref="pass" :visible.sync="visible" @update="carTypePaging" />
  </div>
</template>

<script>
import { carManagePagingAPI, delCarAPI } from '@/api/carRegulate'
import vehicleDialog from './components/vehicle-dialog.vue'

export default {
  name: 'VehicleManage',
  components: { vehicleDialog },

  data() {
    return {
      visible: false,
      // 承载重量
      bearingWeight: [{
        value: 'RANGE_LEVEL_1',
        name: '<1.8（吨）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '1.8-6（吨）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '6-14（吨）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '14-30（吨）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '30-50（吨）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '50-100（吨）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '100>（吨）'
      }],
      // 车辆体积
      vehicleVolume: [{
        value: 'RANGE_LEVEL_1',
        name: '<3（m³）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '3-5（m³）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '5-10（m³）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '10-15（m³）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '15-30（m³）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '30-50（m³）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '50-80（m³）'
      },
      {
        value: 'RANGE_LEVEL_8',
        name: '80-150（m³）'
      },
      {
        value: 'RANGE_LEVEL_9',
        name: '150>（m³）'
      }],
      // 获取车辆类型分页数据
      carTypePagingData: {
        allowableLoad: '',
        allowableVolume: '',
        id: '',
        name: '',
        // 当前页
        page: 1,
        // 页尺寸
        pageSize: 3
      },
      // 总条数
      total: 0,
      pagingItems: []
    }
  },
  created() {
    this.carTypePaging()
  },
  methods: {
    // 车辆分页数据功能
    async carTypePaging() {
      const { data } = await carManagePagingAPI(this.carTypePagingData)
      // 总条数
      this.total = data.counts
      // 当前页
      this.carTypePagingData.page = data.page
      // 分页数组
      this.pagingItems = data.items
    },
    // 点击下一页时候页面同步更新
    pageUpdate(page) {
      this.carTypePagingData.page = page
      this.carTypePaging()
    },
    // 删除车辆功能
    async del(id) {
      console.log('id  ----->  ', id)
      await delCarAPI(id)
      this.$message.success('删除车辆成功')
      this.carTypePaging()
    },
    // 编辑功能
    async edit(id) {
      this.visible = true
      this.$refs.pass.carEdit(id)
    },
    // 搜索功能
    search() {
      this.carTypePaging()
    },
    // 重置功能
    reset() {
      this.carTypePagingData = {
        allowableLoad: '',
        allowableVolume: '',
        id: '',
        name: '',
        // 当前页
        page: 1,
        // 页尺寸
        pageSize: 3
      }
      this.carTypePaging()
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicleMmanage-container-header,.vehicleMmanage-container-footer{
  background-color: #fff;
}
.vehicleMmanage-container-header{
  padding: 20px 20px 0 0;
  margin-bottom: 20px;
 ::v-deep .el-input,.el-select{
  width:250px
  }
  ::v-deep .el-button{
    width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    color: #fff;
}
.reset{
  background-color: #fff;
  color: black;
}
}
.del{
  color: #e15536;
}
.el-pagination{
  margin-top: 20px;
}
.addVehicle{
  width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    color: #fff;
  margin-bottom: 20px;
}
::v-deep .el-row{
  margin-left: 30px;
}
</style>
